<template>
	<view class="container">
		<!-- 顶部图片预览区域 -->
		<view class="preview-area">
			<image :src="currentImage" mode="aspectFit" class="preview-image" v-if="currentImage"></image>
		</view>

		<!-- 下载按钮区域 -->
		<view class="button-group">
			<u-button text="下载已选图片" color="#F57B00" plain shape="circle" @click="downloadSelected"
				:disabled="!currentImage"></u-button>
			<u-button text="下载全部图片" color="#F57B00" shape="circle" @click="downloadAll"></u-button>
		</view>

		<!-- 图片信息区域 -->
		<view class="image-info">
			<text class="info-text">总共{{piclist.length}}张 | 格式：jpg </text>
			<view class="watermark-info">
				<u-icon name="checkmark-circle" color="#19be6b" size="14"></u-icon>
				<text class="info-text">图片已去除水印</text>
			</view>
		</view>

		<!-- 图片列表 -->
		<view class="image-grid">
			<view v-for="(item, index) in piclist" :key="index" class="image-item" @click="selectImage(index)">
				<image :src="item.resUrl" mode="aspectFill" class="grid-image"></image>
				<view class="image-selected" v-if="selectedImages[index]">
					<u-icon name="checkmark" color="#ffffff" size="20"></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selectedImages: {},
				currentImage: '',
				picobject: {},
				piclist: [],

			}
		},
		onShow() {
			const piclist = uni.getStorageSync('video')
			this.picobject = piclist
			this.piclist = []
			piclist.res.forEach(item => {
				if (item.resType == 1) {
					this.piclist.push(item)
				}
			})

		},
		methods: {
			selectImage(index) {
				this.$set(this.selectedImages, index, !this.selectedImages[index])
				this.currentImage = this.piclist[index].resUrl
			},
			async downloadSelected() {
				try {
					const selectedIndexes = Object.keys(this.selectedImages).filter(key => this.selectedImages[key])
					if (selectedIndexes.length === 0) {
						uni.showToast({
							title: '请先选择图片',
							icon: 'none'
						})
						return
					}

					for (let index of selectedIndexes) {
						await this.downloadImage(this.images[index].url)
					}

					uni.showToast({
						title: '下载成功',
						icon: 'success'
					})
				} catch (error) {
					uni.showToast({
						title: '下载失败',
						icon: 'error'
					})
				}
			},
			async downloadAll() {
				try {
					for (let image of this.images) {
						await this.downloadImage(image.url)
					}

					uni.showToast({
						title: '下载成功',
						icon: 'success'
					})
				} catch (error) {
					uni.showToast({
						title: '下载失败',
						icon: 'error'
					})
				}
			},
			downloadImage(url) {
				return new Promise((resolve, reject) => {
					uni.downloadFile({
						url: url,
						success: (res) => {
							if (res.statusCode === 200) {
								uni.saveFile({
									tempFilePath: res.tempFilePath,
									success: () => {
										resolve()
									},
									fail: (err) => {
										reject(err)
									}
								})
							} else {
								reject(new Error('下载失败'))
							}
						},
						fail: (err) => {
							reject(err)
						}
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 20rpx;

		.preview-area {
			width: 100%;
			height: 400rpx;
			background-color: #f8f8f8;
			margin-bottom: 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			.preview-image {
				max-width: 100%;
				max-height: 100%;
			}
		}

		.download-buttons {
			display: flex;
			justify-content: space-between;
			margin-bottom: 20rpx;

			.download-btn {
				width: 48%;
			}
		}

		.image-info {
			margin-bottom: 20rpx;

			.info-text {
				font-size: 24rpx;
				color: #666;
			}

			.watermark-info {
				display: flex;
				align-items: center;
				margin-top: 10rpx;

				.info-text {
					margin-left: 6rpx;
					color: #19be6b;
				}
			}
		}

		.image-grid {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 20rpx;

			.image-item {
				position: relative;
				padding-bottom: 100%;

				.grid-image {
					position: absolute;
					width: 100%;
					height: 100%;
					object-fit: cover;
				}

				.image-selected {
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					background-color: rgba(0, 0, 0, 0.4);
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}

		.button-group {
			display: flex;
			justify-content: space-between;
			margin: 50rpx;
			gap: 40rpx;

			.u-button--plain {
				background: #fde4cb;
			}

			button {
				flex: 1;
				height: 80rpx;
				line-height: 80rpx;
				font-weight: 400;
				font-family: PingFangSC, PingFang SC;
				font-size: 28rpx !important;
				border: none !important;
			}


		}
	}
</style>